<template>
	<div>
		<img class="img" src="../../static/image/questions/tiaoliao.png" alt="" />
		<div class="content-box">
			<div class="heng"></div>
			<div class="content">
				<div class="title-box">
					<p class="title">做饭技巧</p>
					<p class="text">厨房小白必看</p>
					<img class="title-img" src="../../static/image/1/laotou.png" alt="" />
				</div>
			</div>
			<div class="Various-POTS" v-for="(item,index) in list">
				<div class="ju"></div>
				<p class="Various-title">[{{item.title}}]</p>
				<img class="Various-image" :src="item.image" alt="" />
				<p class="Various-text">{{item.text}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		quesdets
	} from '../../api/index.js'
	export default {
		data() {
			return {
				image: '',
				list: []
			}
		},
		onLoad(options) {
			quesdets().then(res => {
				this.list = res.data.filter(item => item.static == options.id)
			})
		},

	}
</script>

<style scoped>
	.img {
		width: 100vw;
		height: 500rpx;
	}

	.content-box {
		width: 100vw;
		margin-top: -100rpx;
		position: relative;
		background-color: white;
		z-index: 999;
		border-top: 1px solid #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.heng {
		width: 200rpx;
		border-radius: 10rpx;
		border: 2px solid #000;
		margin: 20rpx auto;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
	}

	.text {
		font-size: 20rpx;
	}

	.content {
		width: 760rpx;
		text-align: center;
		overflow: hidden;
	}

	.title-img {
		width: 80%;
		margin-top: 40rpx;
	}

	.Various-POTS {
		width: 670rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin: 40rpx auto;
		text-align: center;
		position: relative;
		border-radius: 50rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 3.371rpx 8.345rpx 26.68rpx 2.32rpx rgba(55, 54, 54, 0.16);
	}

	.Various-title {
		font-size: 40rpx;
		position: relative;
		z-index: 2;
	}

	.ju {
		width: 170rpx;
		height: 27rpx;
		background-color: rgb(253, 206, 64);
		position: absolute;
		left: 250rpx;
		top: 70rpx;
	}

	.Various-text {
		text-align: left;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.Various-image {
		width: 120rpx;
		margin-top: 0rpx;
		float: right;
	}
</style>